<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- Form -->
      <el-button
        type="primary"
        @click="dialogFormVisible = true"
        style="margin-right: 10px"
        >新增</el-button
      >
      <el-dialog title="新增取货信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="取货地点" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="取货具体地址" :label-width="formLabelWidth">
            <el-input v-model="form.pisition" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="取货须知" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="form.notes"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), Addpisition(form)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-form-item>
        <el-select v-model="formInline.type" placeholder="请选择查询类型">
           <el-option label="全部" value="all"></el-option>
          <el-option label="取货地点" value="name"></el-option>
          <el-option label="取货具体地址" value="pisition"></el-option>
          <el-option label="取货须知" value="notes"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.value"
          placeholder="请输入内容"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="positions" style="width: 100%">
      <el-table-column prop="name" label="取货地点"> </el-table-column>
      <el-table-column prop="pisition" label="取货具体地址"> </el-table-column>
      <el-table-column prop="notes" label="取货须知"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              (dialogQueryVisible = true), handleEdit(scope.$index, scope.row)
            "
            style="margin-right: 20px"
            >编辑</el-button
          >
          <el-dialog title="新增取货信息" :visible.sync="dialogQueryVisible">
            <el-form :model="formQuery">
              <el-form-item label="取货地点" :label-width="formLabelWidth">
                <el-input
                  v-model="formQuery.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="取货具体地址" :label-width="formLabelWidth">
                <el-input
                  v-model="formQuery.pisition"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="取货须知" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="formQuery.notes"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogQueryVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogQueryVisible = false), Querypisition(formQuery)"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next,total" 
    :total="total" :page="page" :page-size="limit" :pageCount="pageCount" @current-change="onPageChange">
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      formInline: {
        type: "",
        value: "",
      },
      dialogFormVisible: false,
      dialogQueryVisible: false,
      form: {
        name: "",
        pisition: "",
        notes: "",
      },
      formQuery: {
        _id: "",
        name: "",
        pisition: "",
        notes: "",
      },
      formLabelWidth: "120px",
    };
  },
  computed: {
    //计算属性
    ...mapState("pisitionStore", ["isLoading", "positions","limit", "page","pageCount", "total"]),
  },
  created() {
    //一开始就显示读取异步的数据
    this.$store.dispatch("pisitionStore/allPositions");
    console.log("111", this.$store.state);
  },
  methods: {
    onSubmit() {
      console.log();
      this.$store.dispatch("pisitionStore/getOneUser", this.formInline);
    },
    //编辑 信息回填
    handleEdit(index, row) {
      this.formQuery = {
        _id: row._id,
        name: row.name,
        pisition: row.pisition,
        notes: row.notes,
      };
    },
    //删除
    handleDelete(index, row) {
      this.$store.dispatch("pisitionStore/deletePositions", row._id);
      console.log("删除", row);
      this.$store.dispatch("pisitionStore/allPositions"); //新增一个以后 重新渲染页面表格
    },
    //新增取货地址
    Addpisition(form) {
      this.$store.dispatch("pisitionStore/addPositions", form);
      console.log("新增", form);
      this.$store.dispatch("pisitionStore/allPositions"); //新增一个以后 重新渲染页面表格
    },
    //修改取货地址
    Querypisition(formQuery) {
      this.$store.dispatch("pisitionStore/changePositions", formQuery);
      console.log("修改", formQuery);
      this.$store.dispatch("pisitionStore/allPositions"); //新增一个以后 重新渲染页面表格
    },
    //分页
    onPageChange(page){
     this.$store.dispatch("pisitionStore/allPositions",{
      page,
      pageSize: this.limit
     });
    }
  },
};
</script>

<style scoped>
.demo-form-inline {
  margin-top: 20px;
  text-align: left !important;
}
</style>